<template>
  <div class="fullScreen" :key="$route.fullPath">
    <dv-loading
      style="
        color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      "
      v-if="loading"
      >加载中，请稍后......</dv-loading
    >
    <dv-full-screen-container
      v-else
      style="width: 100%; height: 100%"
      class="bg"
    >
      <!-- 顶部 -->
      <div class="top">
        <dv-decoration-8 class="left_line" style="width: 25%; height: 5rem" />
        <dv-decoration-10 style="width: 25%; height: 5px" />
        <dv-decoration-6 style="width: 40%; height: 10px; margin-top: 6rem" />
        <dv-decoration-10
          style="width: 25%; height: 5px; transform: rotateY(180deg)"
        />
        <dv-decoration-8
          class="right_line"
          :reverse="true"
          style="width: 25%; height: 5rem"
        />
        <div class="title">智慧能源管理平台</div>
        <div class="weather">
          <span>
            <i
              @click="back"
              class="el-icon-s-home"
              style="
                font-size: 2rem;
                margin-right: 1rem;
                cursor: pointer;
                color: aqua;
                vertical-align: bottom;
              "
            ></i>
            {{ dataWeather.city }}
            {{ dataWeather.weathertemp }}
            <div class="svg">
              <img
                v-for="(item, index) in src"
                :key="index"
                style="
                  transform: translateX(2rem);
                  filter: drop-shadow(aqua -2rem 0px 0px);
                "
                :src="require('@/assets/weatherIcons/' + item.id + '.svg')"
                alt=""
              />
            </div>
            {{ dataWeather.peraturetemp }}
          </span>
        </div>
        <div class="datatime">
          <span>
            <img
              style="margin-right: 1rem; vertical-align: top"
              src="../../assets/image/clock.svg"
              alt=""
            />{{ dataTime.dateYear }} {{ dataTime.dateWeek }}
            {{ dataTime.dateDay }}
          </span>
        </div>
      </div>
      <!-- 中间内容 -->
      <div class="container">
        <!-- 左侧 -->
        <div class="container_left">
          <dv-border-box-8 class="left_one">
            <div class="user">
              <span class="user_name">员工数量</span>
              <span class="user_num">28</span>
            </div>
            <div class="user">
              <span class="user_name">房客数量</span>
              <span class="user_num">50</span>
            </div>
          </dv-border-box-8>
        </div>
        <!-- 中间 -->
        <div class="container_middle">
          <dv-border-box-11 :title="currentName" :key="key">
            <china @currentName="getCurrentName"></china>
          </dv-border-box-11>
        </div>
        <!-- 右侧 -->
        <div class="container_right">
          <dv-border-box-8 :reverse="true" class="right_one">
            <div class="user">
              <span class="user_name">租户数量</span>
              <span class="user_num">28</span>
            </div>
            <div class="user">
              <span class="user_name">设备数量</span>
              <span class="user_num">50</span>
            </div>
          </dv-border-box-8>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import { formatTime1 } from "../../utils/index";
import { weatherOption } from "../../config/weatherOption/index";
import china from "./components/china.vue";
export default {
  name: "fullScreen",
  components: {
    china,
  },
  data() {
    return {
      src: [{ id: 100 }],
      key: 1,
      loading: true,
      currentName: "中国地图",
      dataWeather: {
        city: "北京市",
        dayweather: "晴",
        nightweather: "多云",
        weathertemp: "晴", // 根据时间判断选白天还是晚上的天气
        nighttemp: "3℃",
        daytemp: "15℃",
        peraturetemp: "3℃~15℃", // 根据时间判断选白天还是晚上的温度
      },
      fromPath: "",
      timeSet: null, // 定时器
      dataTime: {
        dateDay: null,
        dateYear: null,
        dateWeek: null,
        weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      },
    };
  },

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      //  这里的vm指的就是vue实例，可以用来当做this使用
      vm.fromPath = from.path; //获取上一级路由的路径
    });
  },
  mounted() {
    this.getWeather();
    this.getDateTime();
    setTimeout(() => {
      this.loading = false;
    }, 1000);
    let that = this;
    window.addEventListener("fullscreenchange", function () {
      if (!that.checkFull()) {
        that.$router.push(that.fromPath);
      } else {
      }
    });
  },
  destroyed() {
    window.removeEventListener("fullscreenchange", function () {
      if (!that.checkFull()) {
        that.$router.push(that.fromPath);
      } else {
      }
    });
    clearInterval(this.timeSet);
  },
  methods: {
    // 获取时间
    getDateTime() {
      this.timeSet = setInterval(() => {
        this.dataTime.dateYear = formatTime1(new Date(), "yyyy-MM-dd");
        this.dataTime.dateWeek = this.dataTime.weekday[new Date().getDay()];
        this.dataTime.dateDay = formatTime1(new Date(), "HH: mm: ss");
      }, 1000);
    },
    // 返回
    back() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
      this.$router.push(this.fromPath);
    },
    // 判断全屏
    checkFull() {
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器
      var isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },
    // 获取天气
    getWeather() {
      this.$.get({
        //这里的url不能写到data对象的外面
        url: "https://api.asilu.com/weather_v2/",
        dataType: "jsonp", // 请求方式为jsonp
        success: (data) => {
          console.log(data);
          if (data.status === "1") {
            let currTime = new Date().getHours();
            let dailyForecast = data.forecasts[0].casts[0];
            let city = data.forecasts[0].city;
            let daytemp = dailyForecast.daytemp + "℃";
            let nighttemp = dailyForecast.nighttemp + "℃";
            let weathertemp = "";
            let peraturetemp = "";
            if (currTime >= 6 && currTime < 18) {
              weathertemp = dailyForecast.dayweather;
              peraturetemp =
                dailyForecast.nighttemp + "℃~" + dailyForecast.daytemp + "℃";
            } else {
              weathertemp = dailyForecast.nightweather;
              peraturetemp =
                dailyForecast.nighttemp + "℃~" + dailyForecast.daytemp + "℃";
            }
            let message = { id: weatherOption.weatherCode[weathertemp] };
            this.$set(this.src, 0, message);
            this.dataWeather = {
              city,
              daytemp,
              nighttemp,
              weathertemp,
              peraturetemp,
            };
          }
        },
      });
    },
    // 获取title
    getCurrentName(data) {
      this.$nextTick(() => {
        if (data == "china") {
          this.currentName = "中国地图";
        } else {
          this.currentName = `${data}地图`;
        }
      });
    },
  },
};
</script>


<style  lang="scss" scoped>
.fullScreen {
  width: 100%;
  height: 100vh;
  background: url(../../assets/image/pageBg.png) no-repeat fixed;

  .dv-loading {
    /deep/ .loading-tip {
      margin-top: 0.8rem;
    }
  }

  .bg {
    height: inherit;
    position: relative;

    .top {
      width: 100%;
      display: flex;
      height: 6rem;
      justify-content: space-between;
      align-items: center;
      position: relative;

      .title {
        position: absolute;
        left: 50%;
        bottom: 50%;
        color: #fff;
        font-weight: bold;
        font-size: 1.8rem;
        transform: translate(-50%, 50%);
      }

      .weather {
        position: absolute;
        left: 4.1rem;
        top: 0.4rem;
        color: #fff;
        font-size: 1.2rem;

        span {
          display: flex;
          align-items: center;

          .svg {
            width: 2rem;
            height: 2rem;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 8px;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .datatime {
        font-size: 1.2rem;
        position: absolute;
        right: 4.1rem;
        top: 0.7rem;
        color: #fff;
      }
    }

    .container {
      width: 100%;
      height: calc(100vh - 7rem);
      padding-top: 0.9rem;
      display: flex;

      .container_left {
        width: 25%;
        height: 100%;
        // background: red;

        .left_one {
          height: 6rem;

          /deep/ .border-box-content {
            display: flex;
            align-items: center;
            justify-content: space-around;

            .user {
              display: flex;
              flex-direction: column;
              // justify-content: center;
              align-items: center;

              .user_name {
                color: aqua;
              }

              .user_num {
                font-size: 2rem;
                color: #fff;
              }
            }
          }
        }
      }

      .container_middle {
        width: 60%;
        height: inherit;
        // height: calc(100vh - 6rem);
      }

      .container_right {
        width: 25%;
        height: 100%;
        // background: green;

        .right_one {
          height: 6rem;

          /deep/ .border-box-content {
            display: flex;
            align-items: center;
            justify-content: space-around;

            .user {
              display: flex;
              flex-direction: column;
              // justify-content: center;
              align-items: center;

              .user_name {
                color: aqua;
              }

              .user_num {
                font-size: 2rem;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}
</style>